<template>
  <div class="warp_box">
    <div class="bar_box"><Bar/></div>
    <div class="content_box">
    <el-page-header @back="goBack" content="用户详情" class="goback"></el-page-header>
    <div class="top_content">
      <div class="icon_img"><img :src="details.avatar" alt="" class="avatar"></div>
      <div class="msg">
        <div class="username">
          <span>用户名:</span>
          <span style="margin-left:2vw">{{details.username}}</span>
        </div>
        <div class="userid">
          <span>账户ID:</span>
          <span style="margin-left:2vw">{{details.userId}}</span>
        </div>
        <div class="register_date">
          <span>注册时间:</span>
          <span style="margin-left:2vw">{{ new Date(details.createTime).getFullYear().toString()}}年
            {{ (new Date(details.createTime).getMonth() + 1).toString()}}月
            {{ new Date(details.createTime).getDate().toString()}}日</span>
        </div>
      </div>
    </div>
    <div class="buttom_content">
      <div class="vip_box">
        <div>用户类别：</div>
       <el-tag type="success" v-if="details.vipStatus!= 'non_vip'">VIP</el-tag>
       <el-tag type="success" v-else>不是VIP</el-tag>

      </div>
      <div class="vip_box">
        <div>用户VIP等级：</div>
        <el-select v-model="value"  @change="changeVIP(value)">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    </div>

    <div class="buttom"><ButtomBox/></div>
  </div>
</template>

<script>
import {getUserInfo,modifyUser} from '@/api/api'
import ButtomBox from '../components/ButtomBox.vue'
import Bar from '../components/Bar.vue'
export default {
  name: 'UserDetail',
  components:{
    ButtomBox,Bar
  },
  created(){
    if( this.$route.params.userid){
      this.userid = this.$route.params.userid
    }
    else{
      this.userid = localStorage.getItem('userid')
    }
    console.log(this.userid)
     getUserInfo(this.userid).then((response) => {
      console.log(response)
      this.details=response.data
      this.value = this.details.vipLevel
      })
  },
  data(){
    return{
      userid:'',
      details:{},
      options: [{
          value: '0',
          label: '0'
        }, {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }],
        value: '0'
    }
  },
  methods:{
    goBack(){
      this.$router.push(
        {
          name:'Manager',
          params:{
            activeName:'first'
          }
        }
      )
    },
    changeVIP(e){
      const data ={
      "user": this.details.userId,
      "vip": 1,
      "vipLevel": parseInt(e)
      }
       modifyUser(data).then((response) => {
          console.log('data',response)
          getUserInfo(this.userid).then((response) => {
            console.log('getUserInfo',response)
            this.details=response.data
              this.value = this.details.vipLevel
          })
        
      })
      console.log('e',e)
    }
  }
}
</script>

<style>
.avatar{
  width: 7vw;
  height: 7vw;
}
.username{
  margin-bottom: 2vh;
}
.userid{
  margin-bottom: 2vh;
}
.register_date{
  margin-bottom: 2vh;
}
.right_box{
  margin-left: 10vw;
}
.confirm{
  margin-bottom: 2vh;
}
.msg{
  margin-left: 46vw;
}
.icon_img{
  margin-left: 4vw;
}
.top_content{
  display: flex;
  height: 25vh;
  align-items: center;
  background-color: #fff;
}
.vip_box{
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 10%;
  padding-top: 4%;
}
.buttom_content{
  background-color: #fff;
  height: 55vh;
  margin-top: 2vh;
  
}
.content_box{
  height: 85vh;
  width: 80vw;
  padding-left: 10vw;
  padding-right: 10vw;
  background-color: #EFEFEF;
}
.goback{
 margin-top: 1vh;
  background-color: #fff;
  margin-bottom: 1vh;
  height: 5vh;
  align-items: center;
}
</style>